//@ts-nocheck
import React, { useEffect, useImperativeHandle } from 'react'

import * as echarts from 'echarts/lib/echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import 'echarts/lib/chart/radar'
import { Option, ChartsInstance } from '../Bar/interface'

import './index.less'

let echartsInstance: any
let data: Array<Option> = []

interface IProps {
  chartId?: string
  options?: Array<Option>
  chartRef?: React.MutableRefObject<ChartsInstance>
  seriesName?: string
  data?: any
}

const Radar: React.FC<IProps> = ({ options, chartId, chartRef, seriesName = '' }) => {
  useEffect(() => {
    echartsInstance = echarts.init(document.getElementById(chartId || 'strip-radar-chart'))
    setOptions()
  }, [])

  useEffect(() => {
    data = options
    if (echartsInstance) setOptions()
  }, [options])

  useImperativeHandle(chartRef, () => ({
    getInstance: () => {
      return echartsInstance
    }
  }))

  const setOptions = () => {
    let charList = []
    data?.xContentInfoVos?.forEach((xItem) => {
      if (xItem.content !== '总计') {
        let xCharData = data?.yContentInfoVos?.map((yItem) => {
          // let chartData = []
          let chartItem = data?.statisticsInfoVos.filter((filterItem) => {
            return filterItem.xKey === xItem.key && filterItem.yKey === yItem.key
          })[0]
          return parseFloat(chartItem.proportion)
        })

        charList.push({
          value: xCharData,
          name: xItem.content
        })
      } else {
        return null
      }
    })
    echartsInstance.setOption({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        // orient: 'vertical',
        x: 'right',
        y: 'bottom',
        data: data?.xContentInfoVos
          ?.map((item) => {
            if (item.content !== '总计') {
              return item.content
            } else {
              return null
            }
          })
          .filter((item) => item !== null),
        bottom: 0
      },

      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      polar: [
        {
          indicator: data?.yContentInfoVos
            ?.map((item) => {
              if (item.content !== '总计') {
                return {
                  text: item.content,
                  max: 100
                }
              } else {
                return null
              }
            })
            .filter((item) => item !== null)
        }
      ],
      calculable: true,
      series: [
        {
          name: '',
          type: 'radar',
          data: charList
        }
      ]
    })
  }

  return <div className="strip-radar-chart" id={chartId || 'strip-radar-chart'} />
}
export default (Radar)
